<template>
  <div class="level">
      <h1>医院</h1>
      <div class="content">
        <div class="left">等级:</div>
        <ul class="hospital">
            <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
            <li v-for='level in levelArr' :class="{active:activeFlag==level.value}" :key="level.value" @click="changeLevel(level.value)">{{level.name}}</li>
        </ul>
      </div>
  </div>
</template>

<script setup lang="ts">
import {reqHospitalLevelAndRegion} from '@/api/home'
//引入组合式API函数
import {onMounted,ref} from 'vue';
import type {HospitalLevelAndRegionResponseData,HospitalLevelAndRegionArr} from '@/api/home/type'
//定义一个数组存储医院等级数据
let levelArr = ref<HospitalLevelAndRegionArr>([])
//控制医院等级高亮响应式数据
let activeFlag=ref<String>('')
//组件挂载完毕，发一次请求
onMounted(()=>{
  getLevel();
});

const getLevel=async()=>{
    //获取医院的数据：默认获取第一页，一页十个医院的数据
  let result:HospitalLevelAndRegionResponseData=await reqHospitalLevelAndRegion('HosType');
  if(result.code==200){
    //存储医院等级的数据
    levelArr.value=result.data;
  }
  console.log(result)
}

//点击等级的按钮回到
const changeLevel=(level:string)=>{
    //高亮响应式数据存储level数值
    activeFlag.value=level;
}
</script>

<script lang="ts">
export default {
    name:'Level'
}
</script>

<style scoped lang="scss">
.level{
    color: #7f7f7f;
    h1{
        font-weight: 900;
        margin: 10px 0;
    }
    .content{
        display: flex;
        .left{
            margin-right: 10px;
        }
        .hospital{
            display: flex;
            li{
                margin-right: 10px;
                &.active{
                    color: #55a6fe;
                }
            }
            //鼠标移动到上面变蓝色字体 鼠标变小手
            li:hover{
                color:#55a6fe;
                cursor: pointer;
            }
        }

    }
}
</style>